<template>
    <div class="h-100">
        <filter-bar ref="filterBar">
            <div slot="left-bar" class="headerBox">
                <slot></slot>
            </div>
        </filter-bar>
        <interval-bg></interval-bg>

        <opt-bar>
            <template slot="left-bar">
                操作日志
            </template>
            <template slot="right-bar">
                <a-button v-if="exportBtn" class="nbcs-btn-main-bg" @click="exportLog" :loading="exportLoading">导出</a-button>
            </template>
        </opt-bar>
        <a-table
                bordered
                ref="table"
                :columns="columns"
                :data-source="data"
                :loading="loading"
                :row-key="record => record.id"
                :pagination="pagination"
                @change="tableChange"
                :scroll="{ x: 900, y: scrollY}"
        >
        <span slot="proState" slot-scope="text, record">
            <a-tag v-if="record.proState == '疑似' || record.proState == '违规'" class="tag-red">{{ text }}</a-tag>
            <a-tag v-else class="tag-green">{{ text }}</a-tag>
        </span>
            <span slot="type" slot-scope="text">
            <a-tag class="tag-green">{{ text }}</a-tag>
        </span>
        </a-table>
    </div>
</template>

<script>
    import OptBar from "@/layouts/OptBar";
    import IntervalBg from "@/layouts/IntervalBg";

    // import {getTableScroll} from "@/utils/tableScroll";
    import FilterBar from "@/layouts/FilterBar";

    export default {
        name: "logComponent",
        components: {FilterBar, OptBar, IntervalBg},
        props: {
            columns: {
                type: Array
            },
            data: {
                type: Array
            },
            loading: {
                type: Boolean,
                default: false
            },
            exportLoading: {
                type: Boolean,
                default: false
            },
            searchForm: {
                type: Object
            },
            exportBtn: {
                type: Boolean,
                default: false
            },
            page: {
                type: Object
            },
            type: {
                type: String,
                default: ""
            },
            total: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                scrollY: 0,
                pagination: {
                    showQuickJumper: true,
                    showSizeChanger: true,
                    defaultPageSize: 20,
                    total: 0,
                    current: 1,
                    pageSizeOptions: ["20", "30", "50"],
                    showTotal: total => {
                        return `共 ${total} 条`;
                    },
                    onShowSizeChange: (page, pageSize) => {
                        this.$emit("onShowSizeChange", {page: page, pageSize: pageSize});
                    },
                    onChange: page => {
                        console.log(page);
                        this.$emit("onChange", {page: page});
                    }
                }
            };
        },
        created() {
            this.$nextTick(() => {
                this.getTableScroll()
            })
        },
        watch: {
            total(newVal) {
                this.pagination.total = newVal;
            }
        },
        methods: {
            /**
             * 获取table容器高度，设置scroll 保证内容在容器间滚动
             * 需要先设置tabel容器高度
             *      .table-page .ant-table-wrapper{ height: calc(100% - 70px);}
             * 然后在$nextTick中调用保证
             */
            getTableScroll() {
                let wrapperHeight = this.$refs.table.$el.offsetHeight;
                // window.getComputedStyle(this.$refs.table).height
                this.scrollY = wrapperHeight - 100;
            },
            changePageCurrent(current) {
                this.pagination.current = current;
            },
            exportLog() {
                this.$emit("exportLog");
            },
            tableChange(pagination, filters, sorter) {
                this.$emit("tableChange", {pagination, filters, sorter});
            },
        }
    };
</script>

<style lang="less" scoped>
  .headerBox {
    display: flex;

    .btnGroup {
      margin-left: 8px;
    }
  }
  .table-page {
    .ant-table-wrapper {
      height: calc(100% - 150px);
    }
  }
</style>
